site_8g/src/app/[locale]/(navbar)/terms/page.tsx

import Box from "@/components/Box";
import HeaderBack from "@/components/HeaderBack";
import { getLocale, getTranslations } from "next-intl/server";

interface ItemProps {
    text: string;
}
interface GroupRep {
    heads: ItemProps[];
    group: ItemProps[];
    tails: ItemProps[];
    title: string;
}
interface TermsProps {
    termsData: GroupRep[];
}
const PreventLaunderMoney = async () => {
    const t = await getTranslations("terms");
    const locale = await getLocale();
    const file = (await import(`/messages/${locale}.json`)).default;
    const target: TermsProps = file.terms;
    return (
        <>
            <HeaderBack />
            <main className={"main-header"}>
                <Box>
                    <header className={"mb-[0.05rem] text-[0.26rem] font-bold text-[#fcde26]"}>
                        {t("termsTitle")}
                    </header>
                    <h2 className={"mb-[0.05rem] font-bold"}>{t("termsTime")}</h2>

                    {target.termsData.map((terms) => {
                        return (
                            <div
                                key={terms.title}
                                className={
                                    "mb-[0.18rem] border-b-[0.01rem] border-[#3f3f3f] pb-[0.18rem]"
                                }
                            >
                                <h2 className={"mb-[0.05rem] font-bold text-[#fcde26]"}>
                                    {terms.title}
                                </h2>
                                {terms.heads.map((item, index) => (
                                    <p key={index} className={"my-[0.05rem]"}>
                                        {item.text}
                                    </p>
                                ))}
                                <ul className={"pl-[0.18rem]"}>
                                    {terms.group?.map((item, graphIndex) => {
                                        return (
                                            <li
                                                key={graphIndex}
                                                className={"my-[0.05rem] whitespace-pre-line"}
                                            >
                                                {item.text}
                                            </li>
                                        );
                                    })}
                                </ul>

                                {terms.tails.map((item, index) => (
                                    <p key={index} className={"my-[0.05rem]"}>
                                        {item.text}
                                    </p>
                                ))}
                            </div>
                        );
                    })}
                </Box>
            </main>
        </>
    );
};

export default PreventLaunderMoney;